import { useTitle } from 'ahooks'
import React, { RefObject, useEffect, useRef, useState } from 'react'
import './Components/Record.less'
import skf from './Components/skf.svg'
import fkf from './Components/fkf.svg'
import more from './Components/more.svg'
import more2 from './Components/more2.svg'
import path from './Components/path.svg'
import block from './Components/block.svg'
import pic_detail from './Components/pic_detail.svg'
import choose from './Components/choose.svg'
import dustbin from './Components/dustbin.svg'
import Microphone from './Components/Microphone.svg'
import goodsAdd from './Components/goodsAdd.svg'
import { CalendarOutline } from 'antd-mobile-icons'
import arrow from './Components/arrow.svg'
import { history } from 'umi'
import { AutoCenter, Button, Collapse, DatePicker, DatePickerRef, Dialog, Ellipsis, Form, Input, Picker, TextArea, Toast } from 'antd-mobile'

import dayjs from 'dayjs'



export default function Record() {
  const [form] = Form.useForm()
  const formRef = useRef()
  const [visible, setVisible] = useState(false)
  const [value, setValue] = useState<(string | null)[]>()
  const totalRef = useRef<number>(0)
  const goodsList = useRef<number>(1)
  let temp = useTitle('录单开票')
  const userInfo = history.location.state
  console.log(userInfo);


  //车牌属地list
  const Columns = [
    [
      { label: '空', value: '' },
      { label: '重庆市', value: '渝' },
    ],
  ]
  form.setFieldValue(
    'carArea', value
  )
  //付款方抬头跳转
  const onPayer = () => {
    history.push(
      '/Invoice/InvoiceTitle'
    );
  }
  // const getUserInfo = async () => {
  //   const res = await f()

  //   if (res.success) {

  //   } else {
  //     history.push(
  //       '/Invoice/identity'
  //     );
  //   }
  // }
  // useEffect(() => {
  //   getUserInfo()
  // }, [])



  const values = Form.useWatch('contacts', form);
  totalRef.current = 0;
  (values || [{}]).forEach((i, index) => {

    if (i?.unitPrice || i?.cargoNumber) {
      form.setFieldValue(['contacts', index, 'sum'], (i?.unitPrice || 0) * (i?.cargoNumber || 0))

    }
    if (i?.sum) {
      totalRef.current = i.sum + totalRef.current
    }
  })

  // console.log(values, form.getFieldValue('contacts'));

  const onFinish = (data: any) => {
    console.log(data)
  }

  const content = "1111111111111111111"
  // React.useEffect(() => {
  // form.setFieldValue('contacts', a);
  // }, [values])

  return (

    <div className='styles'>
      <Form
        //  name='form'
        form={form}
        onFinish={onFinish}
        initialValues={{
          contacts: [{}],
        }}
        footer={
          <>
            <div className='style_form2'>
              <div className='style_form_left'>
                <div style={{ color: "rgba(230, 46, 46, 1)", fontSize: "18px", fontWeight: "bold" }}>{totalRef.current}</div>
                <div style={{ color: "rgba(153, 153, 153, 1)", fontSize: "10px", fontWeight: "normal", marginTop: "2px" }}>货物总额</div>
              </div>

              <Button className='style_form_right' block type='submit' color='primary' >
                提交
              </Button>
            </div>
          </>

        }
        layout='horizontal'>
        <div className='style_div1'>
          <div className='style_div_1'>
            <img className='style_img' src={skf} alt="" />
            <div className='style_div_right'>
              <span className='style_div_span'>韩梅梅</span>
              <div className='style_div_identify'>500222******949693</div>
            </div>
          </div>
          <hr className='style_hr' />
          <div className='style_div_2' onClick={onPayer}>
            <div className='style_div2_left' >
              <img className='style_img2' src={fkf} alt="" />
              <span className='style_div_span2'>重庆中链融科技有限公司</span>
              <img className='style_img3' src={more} />
            </div>
            <div >
              <img className='style_img4' src={more2} />
            </div>
          </div>
        </div>
        <div className='style_div2'>
          <span className='style_div2_span'>业务发生地</span>
          <div className='style_div2_1'>
            <img className='style_img5' src={path} alt="" />
            <Ellipsis className='style_div2_ellipsis' direction='end' content={content} />
          </div>
          <span className='style_div2_span3'>重新定位</span>
        </div>
        <div className='style_div3'>
          <img className='style_img6' src={block} alt="" />
          <span className='style_div3_span'>货劳明细</span>
        </div>

        <div className='style_div4' >
          <Form.Array
            name='contacts'

            onAdd={operation => { goodsList.current <= 7 ? operation.add() : '' }}

            renderAdd={() => (
              <div className='style_div4_2'>
                <Button className='style_div4_goodsAdd'
                  onClick={() => {
                    { goodsList.current == 8 ? Toast.show(`货物总数不能超过八`) : '' }
                  }}>
                  <img style={{ width: "67.5px" }} src={goodsAdd} alt="" />
                </Button>
              </div>
            )}
            renderHeader={({ index }, { remove }) => (
              <>
                <span style={{ marginLeft: "10px" }}>第{goodsList.current = index + 1}项</span>

                <a onClick={() => { { goodsList.current == 1 ? Toast.show(`至少填写一个货物`) : remove(index) } }} style={{ float: 'right' }}>
                  删除
                </a>
              </>
            )}
          >
            {(fields, { remove }) =>
              fields.map(({ index }) => (
                <>
                  <Form.Item label='货物分类' name={[index, 'cargoSorts']} className='style_form'
                    extra={
                      <img src={choose} className='style_choose'></img>
                    }>
                    <Input
                      placeholder='请输入' clearable style={{ '--text-align': 'right', '--font-size': '15px' }} />
                  </Form.Item>
                  <Form.Item
                    label='规格型号' name={[index, 'models']} className='style_form' >
                    <Input
                      placeholder='请输入规格型号' clearable type='text' style={{ '--text-align': 'right', '--font-size': '15px' }} />
                  </Form.Item>
                  <Form.Item label='数量' className='style_form' name={[index, 'cargoNumber']} extra={'斤'}>
                    <Input
                      placeholder='请输入' clearable type='text' style={{ '--text-align': 'right', '--font-size': '15px' }} />
                  </Form.Item>
                  <Form.Item label='单价' className='style_form' name={[index, 'unitPrice']} extra={'斤/元'}
                  //  getValueFromEvent={e => {
                  //   form.getFieldValue(['contacts',index, 'cargoNumber']);
                  //   console.log(e, form.getFieldValue(['contacts',index, 'cargoNumber']));
                  //   form.setFieldValue(['contacts',index, 'sum'], (e || 0) * (form.getFieldValue(['contacts',index, 'cargoNumber']) || 0))
                  //   return e;
                  // }}
                  >
                    <Input
                      placeholder='请输入' clearable type='text' style={{ '--text-align': 'right', '--font-size': '15px' }} />
                  </Form.Item>
                  <Form.Item label={<span>金额<span style={{ 'fontSize': '12px' }}>(不含税)</span></span>} className='style_form' name={[index, 'sum']} extra={'元'}>
                    {/* {form.getFieldsFormatValue?.()} */}
                    {/* {values ? (values[index]?.unitPrice || 0) * (values[index]?.cargoNumber || 0) : 0} */}
                    <Input
                      placeholder='请输入' clearable type='text' style={{ '--text-align': 'right', '--font-size': '15px' }} readOnly />
                  </Form.Item>
                  <div className='style_div4_1'>
                    <Button onClick={() => { goodsList.current == 1 ? Toast.show(`至少填写一个货物`) : remove(index) }} style={{ width: '87px', color: 'rgba(51, 51, 51, 1)', height: '34.5px', lineHeight: '17px' }}>
                      <img style={{ width: '15px', marginRight: '5px' }} src={dustbin} />删除</Button>
                    <Button style={{ width: '138px', color: 'rgba(51, 51, 51, 1)', height: '34.5px', lineHeight: '17px' }}>
                      <img style={{ width: '15px', marginRight: '5px' }} src={Microphone} alt="" />语音录入
                    </Button>
                  </div>

                </>
              ))
            }
          </Form.Array>

          <div className='style_div5'>
            <span className='style_div5_span'>货运车辆信息</span>

            <div style={{ display: 'flex' }}>
              <Form.Item
                name='carArea'
                label='车牌号'
                extra={
                  <img
                    onClick={() => {
                      setVisible(true)
                    }}
                    src={arrow} />
                }
                style={{ width: '60%', 'fontSize': '15px' }}
              >
                <Input value={value} placeholder='请选择' readOnly />
                <Picker
                  columns={Columns}
                  visible={visible}
                  onClose={() => {
                    setVisible(false)
                  }}
                  value={value}
                  onConfirm={v => {
                    setValue(v)

                  }}
                ></Picker>

              </Form.Item>
              <Form.Item
                name='carId'
                style={{ width: '30%' }}
                rules={[{
                  required: true,
                  message: '不能为空',
                }]}
              >
                <Input placeholder='请输入' />
              </Form.Item>
            </div>
            <Form.Item
              name='startTime'
              label='起运时间'
              // extra={<CalendarOutline />}
              trigger='onConfirm'
              onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                datePickerRef.current?.open()

              }}
              style={{ fontSize: '15px' }}
            >
              <DatePicker >
                {value =>
                  value ? dayjs(value).format('YYYY-MM-DD') : <span style={{ 'fontSize': '15px', color: 'rgba(153, 153, 153, 1)' }}>请选择日期</span>
                }
              </DatePicker>

            </Form.Item>

          </div>
          <div className='style_div6'>
            <div className='style_div6_span'>发票票面备注</div>
            <Form.Item

              name='InvoiceNotes'>
              <TextArea
                className='style_div6_text'
                placeholder={'请填写，非必填（80字符以内）'}
                // showCount
                maxLength={80}
              />
            </Form.Item>

          </div>
          <div style={{ height: "7px" }}></div>
        </div>
      </Form>
    </div>

  )
}
